<template>
    <van-swipe :height="180"  :autoplay="3000">
        <van-swipe-item>
            <van-image  class="covImage" fit="fill" :radius="10" :src="image1"/>
        </van-swipe-item>
        <van-swipe-item>
            <van-image  class="covImage" fit="fill"  :radius="10" :src="image2"/>
        </van-swipe-item>
        <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
    </van-swipe>

</template>

<script setup lang="ts" name="home">
import {ref} from 'vue'
import H1 from '@/assets/images/H1.jpg'
import H2 from '@/assets/images/H2.png'
const image1 = ref(H1)
const image2 = ref(H2)

</script>

<style scoped>
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}
.covImage{
    width: 100%;height: 180px;
}
</style>